@charset "UTF-8";
.clearfix {
	&:after {
		display: block; 
		content: ""; 
		clear: both; 
		width: 0; 
		height: 0; 
		overflow: hidden; 
	}
}
html, body {
	height: 100%; 
}
body {
	background: url(../images/bj.jpg) no-repeat center; 
	background-size: 100% 100%; 
	background-attachment: fixed;
}
.container {
	min-width: 900px; 
	overflow: hidden; 
}
.top-head {
	height: 30px; 
	line-height: 30px; 
	background: rgba(255, 255, 255, 0.6); 

	& a {
		font-size: 14px; 
		color: #000; 
		text-decoration: none; 

		&:hover {
			color: red; 
			text-decoration: underline; 
		}
	}
	& .head-ul {
		margin-right: 100px; 
		float: right; 
	}
	& .head-list {
		margin-left: 20px; 
		float: left; 
	}
}
.con-head {
	margin-top: 20px; 
	height: 60px; 
	text-align: center; 
	& .con-head-title {
		font-size: 36px; 
		color: #fff; 
	}
}
.nav {
	position: absolute; 
	top: 180px; 
	left: 80px; 
    
    & .nav-zu {
    	height: 266px; 
		overflow: hidden; 
    }

	& .nav-ul {
		position: relative; 
		transition: top .5s;

		& .nav-list {
			width: 160px; 
			height: 36px; 
			line-height: 36px; 
			font-size: 20px; 
			text-align: center; 
			background: rgba(0, 204, 255, 0.4); 
			border-radius: 6px; 

			& + .nav-list {
				margin-top: 10px; 
			}
			&:hover {
				background: #0BF; 
				// & a {
				// 	color: #000; 
				// }
			}
			& a {
				display: block; 
				text-decoration: none; 
				color: #fff; 
			}
		}
	}
	& .nav-last {
		margin: 0 auto 10px; 
		width: 0; 
		border-left: 50px solid  transparent; 
		border-right: 50px solid transparent; 
		border-bottom: 18px solid rgba(255, 255, 255, 0.3); 
		cursor: pointer; 
	}
	& .nav-next {
		margin: 10px auto 0; 
		width: 0; 
		border-left: 50px solid  transparent; 
		border-right: 50px solid transparent; 
		border-top: 18px solid rgba(255, 255, 255, 0.3); 
		cursor: pointer; 
	}
}
.main {
	margin-left: 300px; 

	& .go-url {
		width: 90%; 
		text-align: right; 

		& a {
			color: #000; 
			font-size: 18px; 
			text-decoration: none; 

			&:hover {
				color: red; 
				text-decoration: underline;
			}
		}
	}

	& .main-head {
		height: 30px; 
		line-height: 30px; 
		text-align: center; 
		& .main-head-title {
			font-size: 20px; 
			color: #fff; 
		}
	}
	& .main-works-picture {
		margin: 0 auto; 
		width: 90%; 

		& .picture-ul {}
        & .picture-list {
        	padding: 8px; 
        	float: left; 
        	width: 33.3%; 
        	box-sizing: border-box; 

        	& img {
        		width: 100%; 
        		height: 100%; 
        		max-height: 200px; 
        		cursor: pointer; 
        		border-radius: 8px; 
        	}
        }
	}
	& .main-works-intro {
		margin: 20px auto 0; 
		width: 80%; 

		& p {
			line-height: 20px; 
			font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; 
			font-size: 18px; 
			font-weight: 400; 
			color: #000; 
			text-indent: 2em; 
		}
	}
}
.js-picture {
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(0, 0, 0, 0.6); 
	z-index: 10; 

	& img {
		position: absolute; 
		width: 70%; 
		max-height: 100%; 
		z-index: 11; 
	}
}